<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>

    <!-- 主体盒子 -->
    <div class="main_body">
        <!-- 左侧盒子 -->
        <div class="leftBox">
            <!-- 顶部第一个盒子 -->
            <div class="top1_box">
                <div class="item">
                    <h4>2190</h4>
                    <p>
                        <span class="icon-dot" style="color: #6acca3;"></span>
                        设备总数
                    </p>
                </div>
                <div class="item">
                    <h4>2190</h4>
                    <p>
                        <span class="icon-dot" style="color: #6acca3;"></span>
                        设备总数
                    </p>
                </div>
                <div class="item">
                    <h4>2190</h4>
                    <p>
                        <span class="icon-dot" style="color: #6acca3;"></span>
                        设备总数
                    </p>
                </div>
                <div class="item">
                    <h4>2190</h4>
                    <p>
                        <span class="icon-dot" style="color: #6acca3;"></span>
                        设备总数
                    </p>
                </div>
            </div>

            <!-- 顶部第二个盒子 -->
            <div class="top2_box">
                <!-- 标题盒子 -->
                <div class="title">
                    <a href="javascript:;" class="active" data-msg="list1">故障设备监控</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-msg="list2">异常设备监控</a>
                </div>

                <!-- 提示标题盒子 -->
                <div class="tip_title">
                    <span>故障时间</span>
                    <span>设备地址</span>
                    <span>异常代码</span>
                </div>

                <!-- 内容区域盒子 -->
                <div class="content">
                    <ul class="list1">
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                    </ul>

                    <ul class="list2" style="display: none;">
                        <li>
                             <span>20211116</span>
                             <span>异常北京顺义</span>
                             <span>10010</span>
                        </li>
                         <li>
                             <span>20211116</span>
                             <span>异常北京顺义</span>
                             <span>10010</span>
                         </li>
                          <li>
                              <span>20211116</span>
                              <span>异常北京顺义</span>
                              <span>10010</span>
                          </li>
                           <li>
                               <span>20211116</span>
                               <span>异常北京顺义</span>
                               <span>10010</span>
                           </li>
                            <li>
                                <span>20211116</span>
                                <span>异常北京顺义</span>
                                <span>10010</span>
                            </li>
                             <li>
                                 <span>20211116</span>
                                 <span>异常北京顺义</span>
                                 <span>10010</span>
                             </li>
                              <li>
                                  <span>20211116</span>
                                  <span>异常北京顺义</span>
                                  <span>10010</span>
                              </li>
                               <li>
                                   <span>20211116</span>
                                   <span>异常北京顺义</span>
                                   <span>10010</span>
                               </li>
                                <li>
                                    <span>20211116</span>
                                    <span>异常北京顺义</span>
                                    <span>10010</span>
                                </li>
                    </ul>
                </div>

            </div>

            <!-- 点位分布统计 -->
            <div class="top3_box">
                <div class="title">点位分布统计</div>
                <!-- 内容盒子 -->
                <div class="content">
                      <!-- 饼状图 -->
                     <div class="pie_box"></div>
                     <!-- 信息展示盒子 -->
                     <div class="msgshow">
                        <div class="item">
                            <h4>320,11</h4>
                            <p>
                                <span class="icon-dot" style="color: #ed3f35"></span>
                                点位总数
                            </p>
                        </div>
                        <div class="item">
                            <h4>320,11</h4>
                            <p>
                                <span class="icon-dot" style="color: #ed3f35"></span>
                                点位总数
                            </p>
                        </div>
                     </div>
                </div>
            </div>
             

        </div>

        <!-- 中间盒子 -->
        <div class="mainbox">
            <!-- 标题盒子 -->
            <div class="middle_title">
                <span class="icon-cube" style="color:#68d8fe"></span>
                设备数据统计
            </div>

            <!-- 中国地图 -->
            <div class="map" id="map"></div>

            <!-- 柱状图: 全国用户总量统计 -->
            <div class="lineBox">
                <!-- 标题 -->
                <div class="title">
                    <h4>全国用户总量统计</h4>
                </div>

                <!-- 内容 -->
                <div class="content">
                    <!-- 左侧柱状图盒子 -->
                    <div class="left_lineBox" id="left_lineBox"></div>
                    <!-- 右侧信息展示盒子 -->
                    <div class="msgshow">
                        <div class="item">
                            <h4>320,11</h4>
                            <p>
                                <span class="icon-dot" style="color: #ed3f35"></span>
                                点位总数
                            </p>
                        </div>
                        <div class="item">
                            <h4>320,11</h4>
                            <p>
                                <span class="icon-dot" style="color: #ed3f35"></span>
                                点位总数
                            </p>
                        </div>
                    </div>
                </div>
            </div>



        </div>

        <!-- 右侧盒子 -->
        <div class="rightBox">

             <!-- 第一个盒子 -->
             <div class="top1_box">
                  <!-- 标题 -->
                  <div class="title">
                      <a href="javascript:;" class="active" data-msg="itme1">365天</a>
                      <div class="line"></div>
                      <a href="javascript:;" data-msg="item2">90天</a>
                      <div class="line"></div>
                      <a href="javascript:;"  data-msg="item3">30天</a>
                      <div class="line"></div>
                      <a href="javascript:;" data-msg="item4">24小时</a>
                  </div>

                  <!-- 内容区域 -->
                  <div class="content">
                      <div class="item  itme1">
                          <div class="leftItem">
                              <h4>1,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #ed3f35;"></span>
                                  订单量
                              </p>
                          </div>
                          <div class="rightItem">
                               <h4>2,987</h4>
                               <p>
                                   <span class="icon-dot" style="color: #eacf19;"></span>
                                   销售额(万元)
                               </p>
                          </div>
                      </div>

                      <div class="item  item2" style="display: none;">
                          <div class="leftItem">
                              <h4>3,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #ed3f35;"></span>
                                  订单量
                              </p>
                          </div>
                          <div class="rightItem">
                              <h4>3,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #eacf19;"></span>
                                  销售额(万元)
                              </p>
                          </div>
                      </div>

                      <div class="item  item3" style="display: none;">
                          <div class="leftItem">
                              <h4>4,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #ed3f35;"></span>
                                  订单量
                              </p>
                          </div>
                          <div class="rightItem">
                              <h4>4,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #eacf19;"></span>
                                  销售额(万元)
                              </p>
                          </div>
                      </div>

                      <div class="item  item4" style="display: none;">
                          <div class="leftItem">
                              <h4>5,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #ed3f35;"></span>
                                  订单量
                              </p>
                          </div>
                          <div class="rightItem">
                              <h4>5,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #eacf19;"></span>
                                  销售额(万元)
                              </p>
                          </div>
                      </div>
                  </div>
             </div>


             <!-- 第二个折线图盒子 -->
             <div class="line_box">
                <!-- 标题 -->
                <div class="title">
                    <h4>销售额统计</h4>
                    <div class="line"></div>
                    <a href="javascript:;" class="active" data-msg="year">年</a>
                    <a href="javascript:;" data-msg="quarter">季</a>
                    <a href="javascript:;" data-msg="month">月</a>
                    <a href="javascript:;" data-msg="week">周</a>
                </div>

                <!-- 折线统计图 -->
                <div class="conent">
                    <!-- 折线图 -->
                    <div class="lineBox" id="lineBox"></div>
                </div>

             </div>


             <!-- 第三个渠道分布盒子 -->
             <div class="top3_box">

                <!-- 左侧盒子 -->
                <div class="leftBox3  public">
                    <!-- 标题 -->
                    <div class="title">渠道分布</div>
                    <!-- 内容区域 -->
                    <div class="content">
                         <div class="item">
                             <div class="items  items1">
                                 <h4>39%</h4>
                                 <p>
                                     <span class="icon-plane" style="color: #4c9bfd"></span>
                                     机场
                                 </p>
                             </div>

                            <div class="items">
                                  <h4>39%</h4>
                                  <p>
                                      <span class="icon-plane" style="color: #4c9bfd"></span>
                                      机场
                                  </p>
                            </div>
                         </div>

                         <div class="item">
                              <div class="items items1">
                                  <h4>39%</h4>
                                  <p>
                                      <span class="icon-plane" style="color: #4c9bfd"></span>
                                      机场
                                  </p>
                              </div>

                              <div class="items">
                                  <h4>39%</h4>
                                  <p>
                                      <span class="icon-plane" style="color: #4c9bfd"></span>
                                      机场
                                  </p>
                              </div>
                          </div>
                    </div>

                </div>



                <!-- 右侧盒子 -->
                <div class="rightBox3 public">

                    <!-- 标题 -->
                    <div class="title">一季度销售进度</div>

                    <!-- 销售进度 -->
                    <div class="progress" id="progress"></div>

                    <!-- 数字显示 -->
                    <h3>75%</h3>

                    <!-- 最后一个信息展示 -->
                    <div class="lastMsg">
                         <div class="item">
                             <div class="items items1">
                                 <h4>39%</h4>
                                 <p>
                                     <span class="icon-plane" style="color: #4c9bfd"></span>
                                     机场
                                 </p>
                             </div>

                             <div class="items">
                                 <h4>39%</h4>
                                 <p>
                                     <span class="icon-plane" style="color: #4c9bfd"></span>
                                     机场
                                 </p>
                             </div>
                         </div>
                    </div>



                </div>


             </div>






        </div>



    </div>

    <!-- 引入js文件 -->
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/shipei.js"></script>
    <!-- js文件中的代码全部删除 -->
    <script src="./js/index.js"></script>
</body>
</html>